<template>
  <div>
    <div class="userbase">
      <div id="main2" style="width:300px;height:400px;"></div>
      <div id="main4" style="width:300px;height:400px;"></div>
      <div id="main1" style="width:300px;height:400px;"></div>
      <div id="main5" style="width:300px;height:400px;"></div>
    </div>
    <div class="userbase">
      <div id="main3" style="width:300px;height:400px;"></div>
      <div id="main6" style="width:300px;height:400px;"></div>
    </div>
    <!-- <div id="main7" style="width:300px;height:400px;"></div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "UserAnalyse",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var myChart1 = echarts.init(document.getElementById("main1"));
      var myChart2 = echarts.init(document.getElementById("main2"));
      var myChart3 = echarts.init(document.getElementById("main3"));
      var myChart4 = echarts.init(document.getElementById("main4"));
      var myChart5 = echarts.init(document.getElementById("main5"));
      var myChart6 = echarts.init(document.getElementById("main6"));
      // var myChart7 = echarts.init(document.getElementById("main7"));

      var option1 = {
        title: {
          text: "会员训练分布",
          left: "center",
          top: "70%",
          textStyle: {
            fontSize: 15,
            color: "#000"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "训练分布",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "胸肌" },
              { value: 735, name: "手臂" },
              { value: 580, name: "肩" },
              { value: 484, name: "背" },
              { value: 300, name: "腿" }
            ]
          }
        ]
      };
      var option2 = {
        title: {
          text: "会员年龄分布",
          left: "center",
          top: "70%",
          textStyle: {
            fontSize: 15,
            color: "#000"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "年龄分布",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "18-25" },
              { value: 735, name: "26-35" },
              { value: 58, name: "36-45" },
              { value: 48, name: "46-55" },
              { value: 30, name: "56+" }
            ]
          }
        ]
      };
      var option3 = {
        title: {
          text: "会员训练排行",
          left: "center",
          top: "5%",
          textStyle: {
            fontSize: 15,
            color: "#000"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Thu", "Fir", "Sec"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "天数",
            type: "bar",
            barWidth: "60%",
            data: [30, 120, 65]
          }
        ]
      };
      //sex
      var option4 = {
        title: {
          text: "会员性别分布",
          left: "center",
          top: "70%",
          textStyle: {
            fontSize: 15,
            color: "#000"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "性别分布",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "男" },
              { value: 735, name: "女" }
            ]
          }
        ]
      };
      // type
      var option5 = {
        title: {
          text: "会员类型分布",
          left: "center",
          top: "80%",
          textStyle: {
            fontSize: 15,
            color: "#000"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "类型分布",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "至尊" },
              { value: 735, name: "白金年卡" },
              { value: 580, name: "白金季卡" },
              { value: 484, name: "白金月卡" },
              { value: 300, name: "普通年卡" },
              { value: 300, name: "普通季卡" },
              { value: 300, name: "普通月卡" }
            ]
          }
        ]
      };
      var option6 = {
        title: {
          text: "会员消费排行",
          left: "center",
          top: "5%",
          textStyle: {
            fontSize: 15,
            color: "#000"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Thu", "Fir", "Sec"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "总额",
            type: "bar",
            barWidth: "60%",
            data: [30, 120, 65]
          }
        ]
      };

      // var option7 = {
      //   tooltip: {
      //     show: true,
      //     borderColor: "#fe9a8bb3",
      //     borderWidth: 1,
      //     padding: [10, 15, 10, 15],
      //     confine: true,
      //     backgroundColor: "rgba(255, 255, 255, .9)",
      //     textStyle: {
      //       color: "hotpink",
      //       lineHeight: 22
      //     },
      //     extraCssText:
      //       "box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;"
      //   },
      //   series: [
      //     {
      //       type: "wordCloud",
      //       shape: "pentagon",
      //       left: "center",
      //       top: "center",
      //       width: "100%",
      //       height: "100%",
      //       sizeRange: [14, 50],
      //       rotationRange: [0, 0],
      //       rotationStep: 0,
      //       gridSize: 25,
      //       drawOutOfBound: false,
      //       layoutAnimation: true,
      //       textStyle: {
      //         fontFamily: "PingFangSC-Semibold",
      //         fontWeight: 600,
      //         color: function() {
      //           let colors = [
      //             "#fe9a8bb3",
      //             "#fe9a8b03",
      //             "#9E87FFb3",
      //             "#73DDFF",
      //             "#58D5FF"
      //           ];
      //           return colors[parseInt(Math.random() * colors.length)];
      //         }
      //       },
      //       emphasis: {
      //         focus: "none"
      //       },
      //       data: this.yundata
      //     }
      //   ]
      // };
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      myChart4.setOption(option4);
      myChart5.setOption(option5);
      myChart6.setOption(option6);
      // myChart7.setOption(option7);
    }
  }
};
</script>
<style scoped>
.userbase {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
